<template>
	<view class="pt10">
		<u-navbar title="新增音频话术" bgColor="transparent" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" placeholder autoBack>
		</u-navbar>
		<view class="plr30">
			<u-subsection :list="list" :current="current" mode="subsection" @change="change"></u-subsection>
		</view>
		<view class="plr30 mt30">
			<u--input placeholder="请输入音频话术名称" border="surround" v-model="audio_name"></u--input>
		</view>
		<audioSynthesis ref="synthesis" v-if="current == 0" :voiceList="voiceList" @generate="generate" @submit="submit">
		</audioSynthesis>
		<!-- #ifdef APP-PLUS -->
		<!-- #endif -->
		<test v-if="current == 1" @submit="submit"></test>
		
		<recording v-if="current == 2" ref="record" @submit="submit"></recording>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['文字合成', '上传音频', '录制音频'],
				current: 0,
				title: '',
				audio_name: '',
				group_id: '',
				voiceList: []
			};
		},
		onLoad(e) {
			if (e && e.group_id) {
				this.group_id = e.group_id
			}
			this.getVoiceList()
		},
		methods: {
			getVoiceList() {
				this.$api.voiceList().then(res => {
					if (res.code == 200) {
						this.voiceList = res.data.list
						console.log('voiceList', this.voiceList);
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			change(index) {
				this.current = index;
			},

			generate(obj) {
				// if (!this.audio_name) {
				// 	this.$tools.toast('请输入音频话术名称后提交！');
				// 	return
				// }

				uni.showLoading({
					title: '生成中'
				})
				let params = {
					name: this.audio_name,
					...obj
				}
				this.$api.generate(params).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$refs.synthesis.current.src = res.data
						this.$refs.synthesis.current.name = this.audio_name
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},

			submit(src) {
				console.log(src, 111);
				if (!this.audio_name) {
					this.$tools.toast('请输入音频话术名称后提交！');
					return
				}
				let params = {
					name: this.audio_name,
					url: src,
					group_id: this.group_id
				}
				this.$api.addAudio(params).then(res => {
					if (res.code == 200) {
						this.$tools.toast(res.msg);
						if (this.$refs.record) {
							this.$refs.record.url = ''
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						this.$tools.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.u-border,
	/deep/.uni-combox{
		border-color: #88898b !important;
	}
	/deep/.uni-input-placeholder,
	/deep/.uni-textarea-placeholder{
		color: #5a5959 !important;
	}
</style>